<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="/WEB-INF/views/webPart/head.jsp"></jsp:include>

<link rel="stylesheet" href="${resourcePath }/plug-in/colorpicker/css/colorpicker.css" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="${resourcePath }/plug-in/colorpicker/css/colorpicker_layout.css" />
<script type="text/javascript" src="${resourcePath }/plug-in/colorpicker/js/colorpicker.js"></script>
<script type="text/javascript" src="${resourcePath }/plug-in/colorpicker/js/eye.js"></script>
<script type="text/javascript" src="${resourcePath }/plug-in/colorpicker/js/utils.js"></script>

<%-- <script type="text/javascript" src="${resourcePath }/plug-in/colorpicker/js/mylayout.js"></script> --%>

<title>css3生成器 - 呵Sever</title>
<script type="text/javascript">
$(function(){
	if(getBrowserType()=="msie"){
		$(".unsupportIE").show();
	}
	
	/* $("#border_radius").click(function(event){
		var elementX = $(this).offset().left; //当前元素离左侧的位置
		var mousePageX = event.pageX;//当前鼠标离左侧的位置
		var width = $(this).width();//元素宽
		var percent = (mousePageX-elementX)/width;
		
		$(this).find(".progress-bar").css("width",percent*100+"%");
	}); */
	$("#border_radius").keyup(function(){
		var value = $(this).val();
		setRadius1(value);
	});
	$("#border_radius_main .scrollBar#scrollBar_value").hosever_scroll(function(scrollPercent){
		$("#border_radius").val(parseInt(100*scrollPercent));
		setRadius1($("#border_radius").val());
	});
	
	
	$("#box_shadow").keyup(function(){
		var value = $(this).val();
		var color = $("#box_shadow_color").val();
		if(color==""){
			color = "#000";
		}
		setShadowDefault(value, color);
	});
	$("#box_shadow_main .scrollBar#scrollBar_value").hosever_scroll(function(scrollPercent){
		var value = parseInt(100*scrollPercent);
		var color = $("#box_shadow_color").val();
		$("#box_shadow").val(value);
		setShadowDefault(value, color);
	});
	
	$("#box_shadow_color").keyup(function(){
		var value = $("#box_shadow").val();
		var color = $(this).val();
		if(value==""){
			value = 50;
		}
		/* -moz-box-shadow: 0px 0px 8px #ff0303;
		-webkit-box-shadow: 0px 0px 8px #ff0303;
		box-shadow: 0px 0px 8px #ff0303; */
		setShadowDefault(value, color);
	});
	
	/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
	background-image: -moz-linear-gradient(top, #ffffff, #000000);
	background-image: -ms-linear-gradient(top, #ffffff, #000000);
	background-image: -o-linear-gradient(top, #ffffff, #000000);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#000000));
	background-image: -webkit-linear-gradient(top, #ffffff, #000000);
	background-image: linear-gradient(top, #ffffff, #000000); */

	
	
	$("#from_color").keyup(function(){
		var from_color = $(this).val();
		var to_color = $("#to_color").val();
		if(to_color==""){
			to_color = "#000000";
		}
		var type = "";
		setBackgroundGradient(type, from_color, to_color);
	});
	$("#to_color").keyup(function(){
		var to_color = $(this).val();
		var from_color = $("#from_color").val();
		if(from_color==""){
			from_color = "#ffffff";
		}
		var type = "";
		setBackgroundGradient(type, from_color, to_color);
	});
	
	/* opacity: 0.65;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 65);
	filter: alpha(opacity = 65); */
	
	$("#opacity").keyup(function(){
		var value = $(this).val();
		
		setOpacity(value);
		
		var opacityString = "opacity: "+value/100+";\n"+
		"-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity ="+ value+");\n"+
		"filter: alpha(opacity ="+value+");";
	});
	$("#opacity_main .scrollBar#scrollBar_value").hosever_scroll(function(scrollPercent){
		var value = parseInt((1-scrollPercent) * 100);
		$("#opacity").val(value);
		setOpacity(value);
	});
	
	$("input.input_color").attr("readonly","readonly");
});



function setRadius1(val){
	setRadius4(val,val,val,val);
}
function setRadius4(tl,tr,bl,br){
	$("#preview").css("border-radius",tl+"px "+tr+"px "+bl+"px "+br+"px ");
	$("#preview").css("-webkit-border-radius",tl+"px "+tr+"px "+bl+"px "+br+"px ");
	$("#preview").css("-moz-border-radius",tl+"px "+tr+"px "+bl+"px "+br+"px ");
	
	var border_radius_string = "border-radius:"+tl+"px "+tr+"px "+bl+"px "+br+"px;\n"
	+"-webkit-border-radius:"+tl+"px "+tr+"px "+bl+"px "+br+"px;\n"
	+"-moz-border-radius:"+tl+"px "+tr+"px "+bl+"px "+br+"px;";
	//console.log(border_radius_string);
}
function setShadowDefault(value, color){
	setShadow(0, 0, value, 0, color, false);
}

function setShadow(horizontal ,vertical , value ,spread ,color,isInset){
	var inset = "";
	if(isInset){
		inset = "inset";
	}
	
	$("#preview").css("box-shadow",color+" "+horizontal+"px "+vertical+"px "+value+"px "+inset);
	$("#preview").css("-webkit-box-shadow",color+" "+horizontal+"px "+vertical+"px "+value+"px "+inset);
	$("#preview").css("-moz-box-shadow",color+" "+horizontal+"px "+vertical+"px "+value+"px "+inset);
	
	var moz_shadow_string = "box-shadow:"+color+" "+horizontal+"px "+vertical+"px "+value+"px "+inset+";\n"
		+"-webkit-box-shadow:"+color+" "+horizontal+"px "+vertical+"px "+value+"px "+inset+";\n"
		+"-moz-box-shadow:"+color+" "+horizontal+"px "+vertical+"px "+value+"px "+inset+";";
}
function setBackgroundGradient(type,from_color,to_color){
	
	
	var typeString = "";
	var typeString2 = "";
	var GradientTypeString = "";
	
	if(type=="" || type=="top" || type=="bottom"){
		typeString = "top";
		typeString2 = "center top,center bottom";
	}
	if(type=="left" || type=="right"){
		typeString = "left";
		typeString2 = "left top,right bottom";
	}
	
	 /* $("#preview").css({
		"filter":"progid:DXImageTransform.Microsoft.gradient(startColorstr = '"+from_color+"', endColorstr = '"+to_color+"')",
		"-ms-filter":"progid:DXImageTransform.Microsoft.gradient(startColorstr = '"+from_color+"', endColorstr = '"+to_color+"')",
		"background-image":"-webkit-linear-gradient("+typeString+", "+from_color+", "+to_color+")",
		"background-image":"-moz-linear-gradient("+typeString+", "+from_color+", "+to_color+")",
		"background-image":"-ms-linear-gradient("+typeString+", "+from_color+", "+to_color+")",
		"background-image":"-o-linear-gradient("+typeString+", "+from_color+", "+to_color+")",
		"background-image":"-webkit-gradient(linear, "+typeString2+", from("+from_color+"), to("+to_color+"))", 
		"background-image":"linear-gradient("+typeString+", "+from_color+", "+to_color+")"
	}); */
	 
	 if(getBrowserType()=="chrome"){
		 $("#preview").css({
			"background-image":"-webkit-linear-gradient("+typeString+", "+from_color+", "+to_color+")"
		 });
	 }
	 if(getBrowserType()=="firefox"){
		 $("#preview").css({
			 "background-image":"-moz-linear-gradient("+typeString+", "+from_color+", "+to_color+")"
		 });
	 }
	
}
function setOpacity(value){
	$("#preview").css("opacity",value/100);
	$("#preview").css("-ms-filter","progid:DXImageTransform.Microsoft.Alpha(Opacity = "+value+")");
	$("#preview").css("filter","alpha(opacity = "+value+")");
}

$(function(){
	$('#box_shadow_colorSelector').initColorSelector("#000000",
			function (hsb,hex,rgb){
		var value = $("#box_shadow").val();
		var color = "#"+hex;
		$("#box_shadow_color").val(color);
		setShadowDefault(value, color);
	});
	
	$("#from_color_colorSelector").initColorSelector("#ffffff",function (hsb,hex,rgb){
		var color = "#"+hex;
		$("#from_color").val(color);
		var from_color = $("#from_color").val();
		var to_color = $("#to_color").val();
		if(to_color==""){
			to_color = "#000000";
		}
		var type = "";
		setBackgroundGradient(type, from_color, to_color);

	});
	
	$("#to_color_colorSelector").initColorSelector("#ffffff",function (hsb,hex,rgb){
		var color = "#"+hex;
		$("#to_color").val(color);
		var to_color = $("#to_color").val();
		var from_color = $("#from_color").val();
		if(from_color==""){
			from_color = "#ffffff";
		}
		var type = "";
		setBackgroundGradient(type, from_color, to_color);
	});
});
$.fn.initColorSelector = function(default_color,onChangeFunc){
	var $colorSelector = $(this);
	$colorSelector.html("<div style='background-color:"+default_color+"'></div>");
	$colorSelector.ColorPicker({
		color: default_color,
		onChange: function (hsb, hex, rgb) {
			$colorSelector.find("div").attr('style', "background-color:#"+hex+";");
			onChangeFunc(hsb,hex,rgb);
		}
	});
}
</script>


<style>
.previewShell{
	margin:15px;
	padding:15px;
	text-align: center;
	background:url("${resourcePath }/img/backgroundcolor_transparent.png");
}
.preview{
	margin:50px;
	border: 1px solid #888;
	width:200px;
	height:200px;
	display: inline-block;
	background: #fff;
}
.css3Generator .tap{
}
.css3Generator .progress{
	display: inline-block;
	width:300px;
	margin-bottom: 0px;
}

.scrollBar{
	padding: 10px 0 10px 0;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
.scrollBar .scroll_block{
	position: absolute;
	height:15px;
	width: 100px;
	background-color: #ccc;
	cursor: pointer;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	z-index:0;
}
.scrollBar .scroll_block:hover{
	background-color: #394048;
}
.scrollBar .scroll_rail{
	border-top: 1px solid #394048;
	margin:6px 0;
	width: 300px;
	height:0px;
}
input.input_value{
	width:50px;
}
.param_item{
	padding:15px 0;
	border-bottom:1px dashed #aaa;
}
.colorSelector{
	display: inline-block;
	vertical-align: top;
}
input.input_color{
	width:90px;
}
</style>
</head>
<body>
	<jsp:include page="/WEB-INF/views/webPart/top.jsp"></jsp:include>
	<jsp:include page="/WEB-INF/views/webPart/left.jsp"></jsp:include>
	
	<div class="mycol col-md-9 col-xs-11">
		<div class="main">
			<jsp:include page="/WEB-INF/views/pub/tools/webpart/breadcrumb.jsp">
				<jsp:param value="css3生成器" name="breadcrumbName"/>
			</jsp:include>
			
			<div class="mainItem css3Generator">
				<div class="previewShell">
					<div class="preview" id="preview"></div>
				</div>
				<div class="param_main">
					<div class="param_item" id="border_radius_main">
						<span class="tap">圆角border-radius：</span>
						<div class="scrollBar" id="scrollBar_value">
							<div class="scroll_block"></div>
							<div class="scroll_rail"></div>
						</div>
						<input class="input_value" type="text" id="border_radius" value="0">
					</div>
					
					<div class="param_item" id="box_shadow_main">
						<span class="tap">边框阴影box-shadow：</span>
						<div class="scrollBar" id="scrollBar_value">
							<div class="scroll_block"></div>
							<div class="scroll_rail"></div>
						</div>
						<input class="input_value" type="text" id="box_shadow" value="0">
						<br>
						颜色color：<input class="input_color" type="text" id="box_shadow_color" value="#000000">
						<div class="colorSelector" id="box_shadow_colorSelector">
						</div>
					</div>
					<div class="param_item" id="background_gradient_main">
						<div class="unsupportIE" style="color:red;display:none;">该功能不支持IE浏览器</div>
						背景渐变background gradient：
						<input class="input_color" type="text" id="from_color" value="#ffffff">
						<div class="colorSelector" id="from_color_colorSelector">
						</div>
						=》<input class="input_color" type="text" id="to_color" value="#ffffff">
						<div class="colorSelector" id="to_color_colorSelector">
						</div>
					</div>
				
					
					<div class="param_item" id="opacity_main">
						不透明度opacity：
						<div class="scrollBar" id="scrollBar_value">
							<div class="scroll_block"></div>
							<div class="scroll_rail"></div>
						</div>
						<input class="input_value" type="text" id="opacity" value="100">
					</div>
				</div>
			</div>
			<div class="mainItem">
			<b>版本日志：</b>
			<pre>
v20150720 修复：背景渐变支持firefox
v20150720 修复：滑块在缩小浏览器窗口时，显示出错
v20150717 颜色选择器，滚动条 
v20150628 简易css3生成器</pre><br>
			<b>bug：</b><br> 
			<pre>
1.背景渐变暂不支持IE</pre>
			</div>
			
			
		</div>
	</div>
	
	<jsp:include page="/WEB-INF/views/webPart/right.jsp"></jsp:include>
	<jsp:include page="/WEB-INF/views/webPart/footer.jsp"></jsp:include>
</body>
</html>
